<template>
  <div class="commentBox" ref="commentBox">
    <div>
      <score
        :delivery="comment.delivery"
        :score="comment.score"
        :packing="comment.packing"
        :flavor="comment.flavor"></score>
      <div class="tag-container">
        <tag :tag="comment.label" :currentType="type" @change="change"></tag>
      </div>
      <list :list="comment.rate"></list>
    </div>
  </div>
</template>
<script>
import score from './score'
import tag from './tag'
import list from './list'
import { getComment } from '../../api/comment'
import Bscroll from 'better-scroll'
export default {
  data () {
    return {
      type: 1,
      comment: {},
      commentBox: null
    }
  },
  components: {
    score,
    tag,
    list
  },
  created () {
    this.getData().then(() => {
      this.$nextTick(() => {
        this.commentBox = new Bscroll(this.$refs.commentBox, {
          click: true,
          bounce: false
        })
      })
    })
  },
  methods: {
    getData () {
      return new Promise(resolve => {
        getComment({
          id: this.$route.params.id,
          type: this.type
        }).then(res => {
          this.comment = res.data
          resolve()
        })
      })
    },
    change (id) {
      this.type = id
      this.getData()
    }
  }
}
</script>
<style lang="scss" scoped>
.commentBox {
  height: calc(100vh - 44px);
}
.tag-container {
  border-top: .2rem solid #f4f4f4
}
</style>
